<template>
  <div >
    <div style="width: 700px;margin: 0 auto;text-align: center;display: flex;justify-content: space-between">
      <div v-for="friend in friends" :key="friend.id" style="cursor: pointer; display: inline-block;width: 200px;height: 150px;background-color: dodgerblue;border-radius: 10px">
        <a :href="friend.website" style="text-decoration: none;outline-style:none " target="_blank">
          <!--头像-->
          <el-avatar :src="friend.avatar" style="margin-top: 40px"></el-avatar>
          <span style="display: block;font-weight: bold" >{{friend.nickname}}</span>
        </a>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "friend",
  data() {
    return {
      friends: []
    }
  },
  methods: {
    getAllFriends() {
      this.$http({
        url: `friend/list`
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.friends = data.data;
        }
      })
    }
  },
  mounted() {
    this.getAllFriends();
  }
}
</script>

<style scoped>

</style>
